<template>
	<view style="padding: 20px;">
		<view class="avager-box">

			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image :src="userInfo.user.meta.avatar||'/static/image/ava.jpeg'"
					style="width: 48px;height: 48px;border-radius: 34px;"></image>
				<view style="font-size: 14px;"><text>上传头像</text></view>

			</button>



		</view>
		<!-- 
		<view class="form-item">
			<view class="form-item-label">UID</view>
			<view class="form-item-input uni-input">{{userInfo.Id}}</view>

		</view> -->
		<!-- 	<view class="form-item">
			<view class="form-item-label">姓名</view>
			<view class="form-item-input uni-input"><input v-model="userInfo.Name" @tap="userInfo.Name=''"  placeholder="请填写您的真实姓名" /></view>
		</view> -->
		<view class="form-item">
			<view class="form-item-label">昵称</view>
			<view class="form-item-input uni-input">{{userInfo.user.nickname||'用户昵称'}}</view>
		</view>
		<view class="form-item">
			<view class="form-item-label">级别</view>
			<view class="form-item-input uni-input">{{getLevel(userInfo.highestRole)}}</view>
		</view>
		<view class="form-item" v-if="isShowReport">
			<view class="form-item-label">预付货款余额</view>
			<view class="form-item-input uni-input">{{balance}}</view>
		</view>
		<view class="form-item">
			<view class="form-item-label">手机号码</view>
			<view class="form-item-input uni-input">
				{{userInfo.user.mobile}}
			</view>
		</view>
		<view class="form-item">
			<view class="form-item-label">邀请码</view>
			<view class="form-item-input uni-input flex-row items-center justify-end"
				@click="copyNo(userInfo.user.inviteCode)">
				{{userInfo.user.inviteCode}} <u-icon name="/static/icons/copy.png" size="20"></u-icon>
			</view>
		</view>

<!-- 		<view class="flex-col  form-item" style="text-align: left;">
			输入收款银行卡号、姓名、开户行
			<view class="mt-10"
				style="border: #ddd 1px solid; padding: 5px; border-radius: 5px; margin-bottom: 20rpx;min-height: 100rpx;">
				<textarea v-model="userInfo.user.meta.paymentText" placeholder="请在此输入收款信息" auto-height />
			</view>

			<button type="primary" @click="savePaymentText" style="width: 200px;padding: 10rpx">保存</button>
		</view> -->
		<view>
			<view class="mt-10 flex-col justify-center items-center">
				<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
					:maxCount="1" width="300px" height="300px">
					<view class="flex-col justify-center items-center">
						<view style="width: 300px; height: 300px;background-color: #fdfdfd;"
							class="flex-col justify-center items-center">
							<image :src="userInfo.user.meta.qrCode" v-if="userInfo.user.meta.qrCode"
								style="width: 280px;height: 280px"></image>
							<image src="../../static/image/barcode.png" mode="aspectFill" v-else
								style="width: 200rpx;height: 200rpx;">
							</image>
							<view style="color: #888; padding: 10px;" v-if="!userInfo.user.meta.qrCode">在此上传二维码</view>
						</view>
					</view>


				</u-upload>
			</view>

		</view>

		<!-- <view class="form-item">
			<view class="form-item-label">身份证号码</view>
			<view class="form-item-input uni-input"><input type="idcard" maxlength="18" v-model="userInfo.IDNo"
					placeholder="请填写身份证号码" /></view>
		</view>
		<view class="form-item">
			<view class="form-item-label">Email</view>
			<view class="form-item-input uni-input"><input type="email" v-model="userInfo.Email"
					placeholder="请填写Email" /></view>
		</view> -->

		<!-- 
		<view
			style="margin: 15px; border-radius: 24px;background-color: #ff0101;text-align: center;color: #fff;line-height: 32px;"
			@click="goMyMedicalReport">
			我的体检报告</view> -->

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {

		data() {
			const heights = [];
			for (let i = 90; i <= 240; i++) {
				heights.push(i)
			}
			const weights = [];
			for (let i = 30; i <= 299; i++) {
				weights.push(i)
			}
			return {
				userInfo: {},
				sexArray: ['请选择', '男', '女'],
				hIndex: 70,
				wIndex: 20,
				sexIndex: 0,
				fileList6: [],
				balance: 0,
				isShowReport: false,
			}
		},
		onShow() {
			var token = this.$store.state.userToken;
			this.isShowReport = false
			if (token) {
				let userinfo = this.$store.state.userInfo;

				if (userinfo.highestRole == 'AG_CSR' || userinfo.highestRole == 'AU_CSR') {
					this.isShowReport = false
				} else {

					this.isShowReport = true;
					this.getBalance();
				}
				this.getUserDetails();
			} else {
				this.userInfo = {}
			}


		},
		methods: {
			savePaymentText() {
				let _this = this;
				if (!this.userInfo.user.meta.paymentText) {
					uni.showToast({
						title: '请输入提示信息',
						icon: 'none'
					});
					return;
				}
				this.$put({
					url: `${this.$Utils.ApiUrl}/paymentText/mine`,
					data: {
						paymentText: this.userInfo.user.meta.paymentText
					}
				}).then(res => {
					this.$refs.uToast.show({
						message: "保存成功",
						complete() {
							_this.getUserDetails();
						}
					})


				})
			},
			copyNo(data) {
				uni.setClipboardData({
					data,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				})
			},
			getBalance() {
				this.$get({
					url: `${this.$Utils.ApiUrl}/prepaidWallet/balance`
				}).then(async (aRes) => {
					if (aRes.balance) {
						this.balance = aRes.balance
					}

				})

			},
			goMyMedicalReport() {
				uni.navigateTo({
					url: '/pages-users/MyMedicalReport/MyMedicalReport'
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'success',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					this.$get({
						url: `${this.$Utils.ApiUrl}/files/signature`,
						data: {
							dir: 'images/'
						}
					}).then(async (aRes) => {

						const result = await this.$Utils.uploadFilePromise(lists[i].url, aRes, 'images');
						let item = this[`fileList${event.name}`][fileListLen]
						// this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						// 	status: 'success',
						// 	message: '',

						// }))
						this.$put({
							url: `${this.$Utils.ApiUrl}/qrCode/mine`,
							data: {
								qrCodeImage: result
							}
						}).then((uRes) => {
							this.getUserDetails();
						})

					})


					fileListLen++
				}
			},
			getLevel(level) {
				return this.$Utils.getUserLevel(level)
			},

			getNickname: function(e) {
				this.$set(this.userInfo, 'NickName', e.detail.value)
				console.log(e.detail.value)

			},
			onChooseAvatar(e) {
				uni.showLoading({
					title: '正在上传头像'
				})
				console.log(e)

				var _that = this;
				const {
					avatarUrl
				} = e.detail
				//this.$set(this.userInfo, 'avatar', avatarUrl)
				_that.$get({
					url: `${this.$Utils.ApiUrl}/files/signature`,
					data: {
						dir: 'images/'
					}
				}).then(async (aRes) => {
					let result = await this.$Utils.uploadFilePromise(avatarUrl, aRes, 'images')
					this.$put({
						url: `${this.$Utils.ApiUrl}/avatar/mine`,
						data: {
							avatar: result
						}
					}).then((uRes) => {
						this.getUserDetails();
					})
				})


			},

			bindSexChange(e) {
				this.sexIndex = e.detail.value;
				console.log(e);
				this.$set(this.userInfo, 'ESexType', e.detail.value)
			},
			save(e) {


				console.log(this.userInfo)
				if (!this.userInfo.NickName) {
					uni.$u.toast("请填写您的昵称");
					return
				}
				if (!this.userInfo.Name) {
					uni.$u.toast("请填写您的真实姓名");
					return
				}
				if (!this.userInfo.Phone) {
					uni.$u.toast("请填写您的电话");
					return
				}
				if (this.userInfo.Phone) {
					if (!uni.$u.test.mobile(this.userInfo.Phone)) {
						uni.$u.toast("请填写正确的电话号码");
						return
					}
				}
				// if (!this.userInfo.IDNo) {
				// 	uni.$u.toast("请填写身份证号码");
				// 	return
				// }
				// if (this.userInfo.IDNo) {
				// 	if (!uni.$u.test.idCard(this.userInfo.IDNo)) {
				// 		uni.$u.toast("身份证号码不正确");
				// 		return
				// 	}
				// }
				// if (this.userInfo.Email) {
				// 	if (!uni.$u.test.email(this.userInfo.Email)) {
				// 		uni.$u.toast("Email格式不正确");
				// 		return
				// 	}
				// }
				uni.showLoading({
					title: '正在保存用户信息'
				})
				this.$post({
					url: `${this.$Utils.ApiUrl}/api/SysUser/AppSysUserEdit`,
					data: this.userInfo
				}).then(res => {
					if (res.Result == 1) {
						this.$refs.uToast.show({
							message: "保存成功,正在返回上一页",
							complete() {
								uni.navigateBack()
							}
						})

					} else {
						uni.showToast({
							title: res.PromptMessage + " " + res.DebugMessage,
							icon: 'none'
						});
					}

				})
			},
			logout() {
				this.$store.commit("LOGOUT");
				uni.navigateBack()
			},
			getUserDetails() {
				this.$get({
					url: `${this.$Utils.ApiUrl}/me`,
					data: {

					}
				}).then(res => {
					this.userInfo = res;
					this.$store.commit("ADD_USER", res)
				})
			},

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	button {
		background-color: transparent;
		line-height: unset;
		border: unset;
		color: #888;
	}

	button::after {
		border: unset;
	}

	.avager-box {
		display: flex;
		padding: 10px;
	}

	.form-item {
		background-color: #f1f1f1;
		padding: 15px 20px;
		border-radius: 20px;
		margin: 10px;
		display: flex;
	}

	.form-item-label {

		padding: 5px 2px;
	}

	.form-item-input {
		flex: 1;
		text-align: right;
		padding: 0 5px;
	}

	.uni-input {
		color: #999;
		padding: 5px 2px;
	}
</style>